<!-- 领奖 -->
<template>
  <van-dialog v-model:show="showPhoneDialog" title="领奖" :showCancelButton="true" :before-close="onBeforeClosePhoneDialog" @confirm="onConfirm">
    <van-form ref="formRef" style="margin-top: 20px;">
      <van-cell-group inset>
        <van-field
          v-model="form.mobile"
          name="mobile"
          label="手机号码"
          placeholder="请输入手机号码"
          :rules="[{ required: true, message: '请输入手机号码' }]"
        />
        <van-field
          name="code"
          v-model="form.code"
          center
          clearable
          label="短信验证码"
          placeholder="请输入短信验证码"
        >
          <template #button>
            <van-button size="small" type="primary" :disabled="!sendCodeAble" @click="sendCode">
              <van-count-down ref="codeCountDownRef" :time="sendCodeTime" @finish="sendCodeAble = true">
                <template #default="timeData">
                  <span style="color: #fff;" v-if="sendCodeAble">获取验证码</span>
                  <span style="color: red;" v-if="!sendCodeAble">{{ timeData.seconds }}s</span>
                </template>
              </van-count-down>
              <span></span>
            </van-button>
          </template>
        </van-field>
      </van-cell-group>
    </van-form>
  </van-dialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { getAwardsInfoByTask, sendSms4Awards, submitSms4Awards } from '@/api/task'
import dayjs from 'dayjs'
import { showDialog } from 'vant';
import 'vant/es/dialog/style';
import { watch } from 'vue';

const taskId = localStorage.getItem('taskId')
const userId = localStorage.getItem('token')

const showPhoneDialog = ref(false);
const formRef = ref()
const form: any = ref({})
const sendCodeAble = ref(true)
const sendCodeTime = ref(60000)
const codeCountDownRef = ref()

defineExpose({ open })

watch(showPhoneDialog, (val: boolean) => {
  if (!val) {
    form.value = {}
  }
})

function open() {
  showPhoneDialog.value = true;
}

function sendCode() {
  formRef.value.validate(['mobile']).then(() => {
    sendSms4Awards({
      mobile: form.value.mobile, 
      mobileCode: 8888,
      taskId,
      taskUserId: userId
    }).then((res: any) => {
      console.log(res, 'res');
      if (res.code == 200) {
        // todo 倒计时 不可点击 
        sendCodeAble.value = false;
        codeCountDownRef.value.reset();
      }
    })
  })
}

function onBeforeClosePhoneDialog(action: any, done: any) {
  // 点击了确定按钮
  if (action === "confirm") {
    return false;
  } else {
    showPhoneDialog.value = false;  
  }
}

function onConfirm() {
  // 提交手机号码和验证码
  console.log(form.value, 'form');
  
  formRef.value.validate().then(() => {
    submitSms4Awards({
      mobile: form.value.mobile, 
      code: form.value.code,
      taskId: taskId,
      taskUserId: userId          
    }).then((res: any) => {
      console.log(res, 'res');
      if (res.code == 200) {
        // todo 跳转红包链接
        // window.location.href = res.data.awardsUrl

        showPhoneDialog.value = false;

        showDialog({
          title: '',
          message: '领奖成功',
          confirmButtonText: '确定'
        }).then(() => {
          // this.returnStart()
          window.location.href = res.msg;
        });
      }
    })
  })
}    

</script>

<style scoped lang="less">
.take-award-box{
  
}
</style>